<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Mypetstore后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/bootstrap-table.min.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/iconfont.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/style.css">
</head>

<body>
<div class="skin-default" id="wrapper">
    <header class="navbar-header">
        <div class="brand">
            <a class="navbar-brand" href="../index.html" title="mypetstore">宠物商店管理系统</a>
        </div>
        <div class="navbar">
            <i class="sidebar-toggle iconfont icon-menu" data-toggle="push-menu" role="button">
            </i>
            <div class="navbar-menu pull-right">
                <ul class="nav navbar-nav">
                    <li class="dropdown message">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" title="消息">
                            <i class="iconfont icon-email"></i>
                            <span class="badge">4</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="header">
                                您有4条消息
                            </li>
                            <li class="body">
                                <ul class="menu">
                                    <li>
                                        <a href="#" title="如何设置头部head...">
                                            <div class="pull-left">
                                                <img class="img-circle" src="../assets/avatars/avatars.png">
                                            </div>
                                            <h4 class="name">
                                                匿名用户
                                                <small class="pull-right">
                                                    <i class="iconfont icon-time"></i>
                                                    5分钟前
                                                </small>
                                            </h4>
                                            <p class="content">
                                                如何设置头部head的meta值
                                            </p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" title="如何设置头部head...">
                                            <div class="pull-left">
                                                <img class="img-circle" src="../assets/avatars/avatars.png">
                                            </div>
                                            <h4 class="name">
                                                匿名用户
                                                <small class="pull-right">
                                                    <i class="iconfont icon-time"></i>
                                                    5分钟前
                                                </small>
                                            </h4>
                                            <p class="content">
                                                如何设置头部head的meta值
                                            </p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" title="如何设置头部head...">
                                            <div class="pull-left">
                                                <img class="img-circle" src="../assets/avatars/avatars.png">
                                            </div>
                                            <h4 class="name">
                                                匿名用户
                                                <small class="pull-right">
                                                    <i class="iconfont icon-time"></i>
                                                    5分钟前
                                                </small>
                                            </h4>
                                            <p class="content">
                                                如何设置头部head的meta值
                                            </p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" title="如何设置头部head...">
                                            <div class="pull-left">
                                                <img class="img-circle" src="../assets/avatars/avatars.png">
                                            </div>
                                            <h4 class="name">
                                                匿名用户
                                                <small class="pull-right">
                                                    <i class="iconfont icon-time"></i>
                                                    5分钟前
                                                </small>
                                            </h4>
                                            <p class="content">
                                                如何设置头部head的meta值
                                            </p>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="footer">
                                <a href="#" title="查看所有消息">
                                    查看所有消息
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown notify">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" title="通知">
                            <i class="iconfont icon-bells"></i>
                            <span class="badge">7</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="header">
                                您有7个通知
                            </li>
                            <li class="body">
                                <ul class="menu">
                                    <li>
                                        <a class="text-danger" href="#" title="系统发生一个未知错误">
                                            <i class="iconfont icon-error pull-left"></i>
                                            <p class="content">发生一个系统路径错误</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="text-warning" href="#" title="系统发出一个警告">
                                            <i class="iconfont icon-alert pull-left"></i>
                                            <p class="content">为安全起见,请删除install文件夹</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="text-success" href="#" title="修改成功">
                                            <i class="iconfont icon-ok pull-left"></i>
                                            <p class="content">您更新了个人资料</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="text-info" href="#" title="新成员">
                                            <i class="iconfont icon-menu-user pull-left"></i>
                                            <p class="content">3位新成员</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="text-muted" href="#" title="点赞">
                                            <i class="iconfont icon-thumbs-up pull-left"></i>
                                            <p class="content">5个点赞</p>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="footer">
                                <a href="#" title="查看所有通知">
                                    查看所有通知
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown user">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" title="用户">Admin</a>
                        <ul class="dropdown-menu">
                            <li>
                                <a data-toggle="modal" data-target=".menu-setpassword" href="#" title="个人信息">
                                    <i class="iconfont icon-menu-user"></i>
                                    修改密码
                                </a>
                            </li>
                            <li>
                                <a href="#" title="系统设置">
                                    <i class="iconfont icon-setting"></i>
                                    系统设置
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a data-toggle="modal" data-target=".menu-logout" href="#" title="登出">
                                    <i class="iconfont icon-power"></i>
                                    登出
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 左侧导航 -->
    <aside class="main-sidebar">
        <div class="user-panel">
            <div class="image pull-left">
                <img src="../assets/avatars/avatars.png" alt="">
            </div>
            <div class="info pull-right">
                <p class="title">Admin</p>
                <strong>VIP管理员</strong>
            </div>
        </div>
        <section class="sidebar">
            <ul class="sidebar-menu" data-widget="tree">
                <li>
                    <a href="/viewMain" title="首页">
                        <i class="iconfont icon-dashborad"></i>
                        <small>首页</small>
                    </a>
                </li>
                <li class="treeview active">
                    <a href="#" title="商品管理">
                        <i class="iconfont icon-chart"></i>
                        <small>商品管理</small>
                        <span class=" pull-right">
								<i class="iconfont icon-menu-left-small"></i>
							</span>
                    </a>
                    <ul class="treeview-menu">
                        <li>
                            <a href="/Item/viewItem_info">
                                <i class="iconfont icon-circle-hollow"></i>
                                <small>商品信息管理</small>
                            </a>
                        </li>
                        <li class="active">
                            <a href="/Item/viewItem_type">
                                <i class="iconfont icon-circle-hollow"></i>
                                <small>商品类型管理</small>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#" title="订单管理">
                        <i class="iconfont icon-form"></i>
                        <small>订单管理</small>
                        <span class=" pull-right">
								<i class="iconfont icon-menu-left-small"></i>
							</span>
						</a>
						<ul class="treeview-menu">
							<li>
								<a href="/order/orderControl">
									<i class="iconfont icon-circle-hollow"></i>
									<small>订单信息管理</small>
								</a>
							</li>
							<li>
								<a href="/order/ordershipping">
									<i class="iconfont icon-circle-hollow"></i>
									<small>发货信息管理</small>
								</a>
							</li>
						</ul>
					</li>
					<li class="treeview">
						<a href="#" title="用户管理">
							<i class="iconfont icon-ui"></i>
							<small>用户管理</small>
							<span class=" pull-right">
								<i class="iconfont icon-menu-left-small"></i>
							</span>
                    </a>
                    <ul class="treeview-menu">
                        <li>
                            <a href="/account/main">
                                <i class="iconfont icon-circle-hollow"></i>
                                <small>用户信息查改</small>
                            </a>
                        </li>
                    </ul>
                </li>

            </ul>
        </section>
    </aside>
    <div class="page-wrapper">
        <div class="page-header">
            <h1 class="title">
                商品管理
                <small>商品库存管理</small>
            </h1>
            <ol class="breadcrumb">
                <li>
                    <a href="../index.html" title="家">
                        <i class="iconfont icon-home"></i>
                        <small>首页</small>
                    </a>
                </li>
                <li>
                    <small>
                        商品管理
                    </small>
                </li>
                <li class="active">
                    <small>商品库存管理</small>
                </li>
            </ol>
        </div>
        <section class="page-body">
            <div class="row widget">
                <section class="col-md-12">
                    <div class="box table">
                        <div class="box form">
                            <div class="box-header">
                                <h3 class="box-title">商品类型查看</h3>
                            </div>
                        </div>
                        <div class="box-body">
                            <form class="form-inline" action="#" onsubmit="return false;">
                                <div class="form-group">
                                    <select class="form-control"  id="projectType">
                                        <option>category</option>
                                        <option>product</option>
                                    </select>
                                    <input type="text" class="form-control" id="" placeholder="Information">

                                    <button type="submit" class="btn btn-info" id="search"><i
                                            class="glyphicon glyphicon-search"></i>搜索
                                    </button>

                                    <span>
											<!-- 写一个th:if判断下拉框里是啥，决定按钮跳转的界面 -->

											<a href="/Item/viewAddCategory" id="category_search_btn" type="button" class="btn btn-info">添加</a>
											<a href="/Item/viewAddProduct" id="product_search_btn" type="button" class="btn btn-info" style="display:none">添加</a>
										</span>
                                </div>
                            </form>
                        </div>
                        <div th:fragment="table_refresh">
                            <div id="table_category" class="box-body">
                                <table class="table table-responsive table-hover">
                                    <thead>
                                    <tr>
                                        <th>categoryId</th>
                                        <th>name</th>
                                        <th>description</th>
                                        <th>operation</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="category:${session.categoryList}">
                                        <td th:text="${category.categoryId}">DOGS</td>
                                        <td th:text="${category.name}">Birds</td>
                                        <td>
                                            <a src="#" th:utext="${category.description}">图片url</a>
                                        </td>
                                        <td>
                                            <a th:href="'/Item/viewUpdateCategory?categoryId='+${category.categoryId}+'&name='+${category.name}+'&description='+${category.description}">
                                                <button type="button" class="btn btn-info">
                                                    <i class="glyphicon glyphicon-pencil"></i>
                                                    编辑
                                                </button>
                                            </a>
                                            <a th:href="'/Item/deleteCategory?categoryId='+${category.categoryId}">
                                                <button type="button" class="btn btn-danger">
                                                    <i class="glyphicon glyphicon-remove"></i>
                                                    删除
                                                </button>
                                            </a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="box-body">
                                <table id="table_product" class="table table-responsive table-hover"
                                       style="display:none">
                                    <thead>
                                    <tr>
                                        <th>productId</th>
                                        <th>category</th>
                                        <th>name</th>
                                        <th>description</th>
                                        <th>operation</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="product:${session.productList}">
                                        <td th:text="${product.productId}">K9-BD-01</td>
                                        <td th:text="${product.categoryId}">DOGS</td>
                                        <td th:text="${product.name}">Bulldog</td>
                                        <td>
                                            <a src="#" th:utext="${product.description}">图片url</a>
                                        </td>
                                        <td>
                                            <a th:href="'/Item/viewUpdateProduct?productId='+${product.productId}+'&categoryId='+${product.categoryId}+'&name='+${product.name}+'&description='+${product.description}">
                                                <button type="button" class="btn btn-info">
                                                    <i class="glyphicon glyphicon-pencil"></i>
                                                    编辑
                                                </button>
                                            </a>
                                            <a th:href="'/Item/deleteProduct?productId='+${product.productId}">
                                                <button type="button" class="btn btn-danger">
                                                    <i class="glyphicon glyphicon-remove"></i>
                                                    删除
                                                </button>
                                            </a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <!-- 修改密码模态框 -->
            <div class="modal fade menu-setpassword" tabindex="-1" role="dialog">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title">修改密码</h4>
                        </div>
                        <div class="modal-body">
                            <table class="table">
                                <tbody>
                                <tr>
                                    <th>
                                        旧密码
                                    </th>
                                    <td>
                                        <input type="text" class="form-control" placeholder="请输入旧密码"
                                               name="js-oldPassword">
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        新密码
                                    </th>
                                    <td>
                                        <input type="text" class="form-control" placeholder="请输入新密码"
                                               name="js-newPassword">
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        确认密码
                                    </th>
                                    <td>
                                        <input type="text" class="form-control" placeholder="请再次输入新密码"
                                               name="js-verifyPassword">
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary">保存</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 退出提示模态框 -->
            <div class="modal fade menu-logout" tabindex="-1" role="dialog">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title">提示</h4>
                        </div>
                        <div class="modal-body">
                            <p>是否确定退出</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary">登出</button>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    <script type="text/javascript" src="../assets/js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="../assets/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="../assets/libs/tinymce/tinymce.min.js"></script>
    <script type="text/javascript" src="../assets/js/Chart.min.js"></script>
    <script type="text/javascript" src="../assets/js/echarts.min.js"></script>
    <script type="text/javascript" src="../assets/js/alpha.js"></script>
    <script type="text/javascript" src="../assets/js/dashboard_chart.js"></script>
    <script type="text/javascript" src="../assets/js/type_change.js"></script>
    <script type="text/javascript" src="../assets/js/item/ShowCategoryOrProductInfo.js"></script>
    <script type="text/javascript" src="../assets/js/type_change.js"></script>

</body>

</html>